<template>
	<view class="search-container">
		<!-- 搜索头部 -->
		<view class="search-header">
			<view class="search-input-box">
				<u-icon name="search" size="20" color="#909399"></u-icon>
				<input class="search-input" type="text" v-model="keyword" placeholder="搜索商品" confirm-type="search" focus
					@confirm="handleSearch" />
				<u-icon v-if="keyword" name="close" size="20" color="#909399" @click="clearKeyword"></u-icon>
			</view>
			<text class="cancel-btn" @click="goBack">取消</text>
		</view>

		<!-- 搜索内容区域 -->
		<view class="search-content">
			<!-- 搜索历史 -->
			<view class="search-section" v-if="historyList.length > 0">
				<view class="section-header">
					<text class="section-title">搜索历史</text>
					<u-icon name="trash" size="20" color="#909399" @click="clearHistory"></u-icon>
				</view>
				<view class="tag-list">
					<view class="tag-item" v-for="(item, index) in historyList" :key="index" @click="searchByTag(item)">
						<text>{{ item }}</text>
					</view>
				</view>
			</view>

			<!-- 热门搜索 -->
			<view class="search-section">
				<view class="section-header">
					<text class="section-title">热门搜索</text>
				</view>
				<view class="tag-list">
					<view class="tag-item" v-for="(item, index) in hotList" :key="index" @click="searchByTag(item)">
						<text>{{ item }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 搜索结果 -->
		<view class="search-result" v-if="showResult">
			<view class="result-header">
				<view class="sort-item" :class="{ active: sortType === 'default' }" @click="changeSort('default')">
					<text>综合</text>
				</view>
				<view class="sort-item" :class="{ active: sortType === 'sales' }" @click="changeSort('sales')">
					<text>销量</text>
				</view>
				<view class="sort-item" :class="{ active: sortType === 'price' }" @click="changeSort('price')">
					<text>价格</text>
					<view class="sort-icon">
						<u-icon name="arrow-up" size="12"
							:color="sortType === 'price' && !priceDesc ? '#306EF6' : '#C0C4CC'"></u-icon>
						<u-icon name="arrow-down" size="12"
							:color="sortType === 'price' && priceDesc ? '#306EF6' : '#C0C4CC'"></u-icon>
					</view>
				</view>
			</view>

			<view class="result-list">
				<view class="result-item" v-for="(item, index) in resultList" :key="index" @click="goToDetail(item)">
					<u-image width="160rpx" height="160rpx" :src="item.image"></u-image>
					<view class="item-info">
						<text class="item-name u-line-2">{{ item.name }}</text>
						<text class="item-price">¥{{ item.price }}</text>
						<text class="item-sales">已售{{ item.sales }}件</text>
					</view>
				</view>

				<view class="no-more" v-if="resultList.length > 0 && !hasMore">
					<text>没有更多了</text>
				</view>

				<view class="empty-result" v-if="resultList.length === 0">
					<u-icon name="info-circle" size="80" color="#cccccc"></u-icon>
					<text>没有找到相关商品</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				historyList: [],
				hotList: ['焊机'],
				showResult: false,
				resultList: [],
				hasMore: true,
				page: 1,
				sortType: 'default',
				priceDesc: false
			}
		},
		onLoad() {
			// 获取本地存储的搜索历史
			const history = uni.getStorageSync('searchHistory');
			if (history) {
				this.historyList = JSON.parse(history);
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			clearKeyword() {
				this.keyword = '';
				this.showResult = false;
			},
			handleSearch() {
				if (!this.keyword.trim()) return;

				// 保存搜索历史
				this.saveHistory(this.keyword);

				// 执行搜索
				this.search();
			},
			searchByTag(tag) {
				this.keyword = tag;
				this.search();
			},
			search() {
				this.showResult = true;
				this.page = 1;
				this.hasMore = true;

				// 模拟搜索结果
				this.resultList = [{
						id: 1,
						name: this.keyword + ' 商品1 商品描述商品描述商品描述',
						price: 99.9,
						sales: 1000,
						image: '/static/product/product1.jpg'
					},
					{
						id: 2,
						name: this.keyword + ' 商品2 商品描述商品描述',
						price: 199.9,
						sales: 500,
						image: '/static/product/product2.jpg'
					},
					{
						id: 3,
						name: this.keyword + ' 商品3 商品描述',
						price: 299.9,
						sales: 200,
						image: '/static/product/product3.jpg'
					}
				];

				// 根据排序类型排序
				this.sortResult();
			},
			saveHistory(keyword) {
				// 如果已存在，则移除旧的
				const index = this.historyList.indexOf(keyword);
				if (index !== -1) {
					this.historyList.splice(index, 1);
				}

				// 添加到历史记录开头
				this.historyList.unshift(keyword);

				// 最多保存10条
				if (this.historyList.length > 10) {
					this.historyList = this.historyList.slice(0, 10);
				}

				// 保存到本地存储
				uni.setStorageSync('searchHistory', JSON.stringify(this.historyList));
			},
			clearHistory() {
				uni.showModal({
					title: '提示',
					content: '确定要清空搜索历史吗？',
					success: res => {
						if (res.confirm) {
							this.historyList = [];
							uni.removeStorageSync('searchHistory');
						}
					}
				});
			},
			changeSort(type) {
				if (type === 'price' && this.sortType === 'price') {
					// 价格排序，点击切换升降序
					this.priceDesc = !this.priceDesc;
				} else {
					this.sortType = type;
					if (type === 'price') {
						this.priceDesc = false;
					}
				}

				// 重新排序
				this.sortResult();
			},
			sortResult() {
				if (this.sortType === 'sales') {
					// 按销量排序
					this.resultList.sort((a, b) => b.sales - a.sales);
				} else if (this.sortType === 'price') {
					// 按价格排序
					if (this.priceDesc) {
						this.resultList.sort((a, b) => b.price - a.price);
					} else {
						this.resultList.sort((a, b) => a.price - b.price);
					}
				} else {
					// 综合排序，这里简单按ID排序
					this.resultList.sort((a, b) => a.id - b.id);
				}
			},
			goToDetail(item) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${item.id}`
				});
			}
		},
		// 下拉加载更多
		onReachBottom() {
			if (!this.showResult || !this.hasMore) return;

			// 模拟加载更多
			if (this.page < 3) {
				this.page++;

				// 模拟新数据
				const newData = [{
						id: this.page * 3 + 1,
						name: this.keyword + ' 加载更多商品' + (this.page * 3 + 1),
						price: 99.9 * this.page,
						sales: 1000 - this.page * 100,
						image: '/static/product/product1.jpg'
					},
					{
						id: this.page * 3 + 2,
						name: this.keyword + ' 加载更多商品' + (this.page * 3 + 2),
						price: 199.9 * this.page,
						sales: 500 - this.page * 50,
						image: '/static/product/product2.jpg'
					}
				];

				this.resultList = [...this.resultList, ...newData];
				this.sortResult();
			} else {
				this.hasMore = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-container {
		min-height: 100vh;
		background-color: #f8f8f8;

		.search-header {
			display: flex;
			align-items: center;
			padding: 10px 15px;
			background-color: #ffffff;

			.search-input-box {
				flex: 1;
				display: flex;
				align-items: center;
				height: 36px;
				background-color: #f5f5f5;
				border-radius: 18px;
				padding: 0 15px;

				.search-input {
					flex: 1;
					height: 36px;
					font-size: 14px;
					margin: 0 10px;
				}
			}

			.cancel-btn {
				font-size: 14px;
				color: #333333;
				margin-left: 10px;
				padding: 5px;
			}
		}

		.search-content {
			padding: 15px;

			.search-section {
				margin-bottom: 20px;

				.section-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 15px;

					.section-title {
						font-size: 16px;
						font-weight: 500;
						color: #333333;
					}
				}

				.tag-list {
					display: flex;
					flex-wrap: wrap;

					.tag-item {
						padding: 6px 12px;
						background-color: #ffffff;
						border-radius: 15px;
						margin-right: 10px;
						margin-bottom: 10px;
						font-size: 14px;
						color: #333333;
					}
				}
			}
		}

		.search-result {
			background-color: #ffffff;

			.result-header {
				display: flex;
				height: 40px;
				border-bottom: 1px solid #f5f5f5;

				.sort-item {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 14px;
					color: #333333;

					&.active {
						color: #306EF6;
					}

					.sort-icon {
						display: flex;
						flex-direction: column;
						margin-left: 5px;
						height: 24px;
						justify-content: center;
					}
				}
			}

			.result-list {
				padding: 10px 15px;

				.result-item {
					display: flex;
					padding: 10px 0;
					border-bottom: 1px solid #f5f5f5;

					.item-info {
						flex: 1;
						margin-left: 10px;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.item-name {
							font-size: 14px;
							color: #333333;
							margin-bottom: 5px;
						}

						.item-price {
							font-size: 16px;
							color: #fa3534;
							font-weight: bold;
							margin-bottom: 5px;
						}

						.item-sales {
							font-size: 12px;
							color: #999999;
						}
					}
				}

				.no-more {
					text-align: center;
					padding: 15px 0;
					font-size: 14px;
					color: #999999;
				}

				.empty-result {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 50px 0;

					text {
						font-size: 14px;
						color: #999999;
						margin-top: 15px;
					}
				}
			}
		}
	}
</style>